<template>
    <div class="login-container">
        <el-form :model="ruleForm" :rules="rules"
         status-icon
         ref="ruleForm" 
         label-position="left" 
         label-width="0px" 
         class="demo-ruleForm login-page">
            <div class="title"><span>用户登录</span></div>
            <el-form-item prop="username" >
                <el-input type="text" 
                    v-model="ruleForm.username" 
                    auto-complete="off" 
                    placeholder="用户名"
                    prefix-icon="el-icon-user"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password" >
                    <el-input type="password" 
                        v-model="ruleForm.password" 
                        auto-complete="off" 
                        placeholder="密码"
                        prefix-icon="el-icon-lock"

                    ></el-input>
                </el-form-item>
            <el-link type="info" class="view-auto" style="width:100%; margin-bottom: 10px;" :underline="false">忘记密码?</el-link>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%; border-radius: 21px;" @click="handleSubmit" :loading="logining">登录</el-button>
            </el-form-item>
            <el-link type="primary" class="view-auto" style="width:100%;" :underline="false">注册</el-link>
        </el-form>
    </div>
</template>

<script>
import axios from 'axios'
window.sessionStorage

export default {
    name:'Login',
    data(){
        return {
            logining: false,
            ruleForm: {
                username: 'szswtest',
                password: '',
            },
            rules: {
                username: [{required: true, message: '请输入账号', trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'}]
            },
        }
    },
    methods: {
        handleSubmit(event){
            this.$refs.ruleForm.validate((valid) => {
                if(valid){
                    this.logining = true;
                    axios({
                      method: 'GET',
                      url: 'http://58.67.157.136:51010/psgs-test/login/loginValidNew2',
                      params: {
                        username: this.ruleForm.username,
                        password: btoa(this.ruleForm.password)
                      }
                    }).then(response => {
                      //响应状态码
                      if ( response.data.code === '200') {
                          console.log(response);
                          sessionStorage.setItem('token',response.data.data.token)
                          this.$router.push({path:'/home'});
                          this.logining = false;
                      }else{
                        console.log('error submit!');
                        
                        this.$alert('用户名或密码错误', '错误', {
                        type: 'error',
                        center: true
                      })
                      this.logining = false;
                      return false;
                }
                    })
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.login-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../assets/img/background.jpg) no-repeat center center;
  background-size: cover;

    .login-page {
      -webkit-border-radius: 5px;
      border-radius: 21px;
      margin: 180px auto;
      width: 290px;
      padding: 35px 30px 37px;
      background: #f1f1f1;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;
      .title {
        margin-bottom: 40px;
        text-align: center;
        color: #bbb9b8;
        font-size: 15px;
        font-weight: 700;
        }
    }
    }

label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
  
}

</style>

